<template>
    <div>
        <!-- 管理员列表 -->
        <p>管理员列表</p>
        <a-table :columns="columns" :dataSource="datas" rowKey="id" >
            <template #weixin={record}>
                <a-button type="link" @click="error" :size="size">[ 点击绑定 ]</a-button>
            </template>
            <template #caozuo={record}>
                <a-button type="primary" :size="size" @click="bianji(record)" >编辑</a-button> &nbsp;
                <a-button  :size="size" @click="showModal" >登录日志</a-button>&nbsp;
                <a-button  :size="size" @click="showModal">操作日志</a-button>&nbsp;
                <a-button type="primary" danger :size="size" @click="deldata(record.id)">删除</a-button>
            </template>
        </a-table>
        <a-button type="primary" :size="size" @click="AddData()">添加</a-button>

        <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
            <table border="1px">
                <tr>
                    <th>时间</th>
                    <th>操作</th>
                    <th>ip</th>
                    <th>ip属地</th>
                </tr>
                
                <tr>
                    <td>2022-04-10 20:18:05</td>
                    <td>登录成功</td>
                    <td>122.138.170.136:52762</td>
                    <td>吉林省白山市</td>
                </tr>
            </table>
        </a-modal>
    </div>
</template>

<script setup> 
import {toRefs,onMounted,reactive,ref} from 'vue'
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import {getManagerData,putManagerData,delManagerData,postManagerData} from '../../../api/manager'
let query = reactive({datas:[]})
const router = useRouter()
onMounted(()=>{
    getdata()
})

const bianji =(da)=>{
    let qe = {
        id:da.id,
        name:da.name,
        role:da.role
    }
    router.push({ path: `PutAdminList`,query:qe }) 
}
const visible = ref(false);

const showModal = () => {
  visible.value = true;
};

const handleOk = e => {
  console.log(e);
  visible.value = false;
};
const AddData=()=>{
    router.push({path:'AddAdminList'})
}
const getdata = async()=>{
    let {data} = await getManagerData()
    query.datas = data.data
    console.log(data.data);
}
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '登录名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '角色',
        dataIndex: 'role',
        key: 'role',
    },
    {
        title: '是否是销售',
        dataIndex: 'market',
        key: 'market',
    },
    {
        title: '微信绑定',
        dataIndex: 'id',
        slots:{customRender:'weixin'}
    },
    {
        title: '最后时间',
        dataIndex: 'last_time',
        key: 'last_time',
    },
    {
        title: '最后IP',
        dataIndex: 'last_ip',
        key: 'last_ip',
    },
    {
        title: '操作',
        dataIndex: 'id',
        slots:{customRender:'caozuo'}
    },
]
const deldata = async (data)=>{
    console.log(data);
    await delManagerData(data)
    await getdata()
}
const error = () => {
      message.error('微信公众号功能未开启，请先开启');
    };
let {datas} = toRefs(query)

</script>

<style scoped>

</style>